<template>
  <div :class="['cjui-page-panel', isPure && 'is-isPure', shadowType && `shadow-${shadowType}`, `height-${viewHeightType}`]">
    <div v-if="header || $slots.header" class="cjui-page-panel-header">
      <slot v-if="$slots.header" name="header"></slot>

      <div v-else class="flex items-center">
        <CjuiPagePanelTitle v-if="headerBorder" :title="header" />
        <span v-else>{{ header }}</span>
        <el-tooltip v-if="headerTips" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ headerTips }}</div>
          </template>
          <cjui-icon class="ml-5px mt-1px" icon="ep:question-filled" />
        </el-tooltip>
      </div>
    </div>

    <div v-if="$slots.intro" class="cjui-page-panel-intro">
      <slot name="intro"></slot>
    </div>

    <div class="cjui-page-panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CjuiPagePanelTitle from './PagePanelTitle.vue'

defineOptions({
  name: "CjuiPagePanel",
})

interface Props {
  viewHeightType?: 'none' | 'full' | 'min-full' // 路由视图高度：full -固定高度，min-full - 最小高度
  isPure?: boolean // 是否为一个纯净的容器，不含padding
  shadowType?: 'none' | 'always' | 'hover'
  header?: string
  headerTips?: string
  headerBorder?: boolean // 标题是否含有左侧修饰线
}
withDefaults(defineProps<Props>(), {
  viewHeightType: 'none',
  isPure: false,
  shadowType: 'always',
  header: '',
  headerTips: '',
  headerBorder: false,
})
</script>

<style lang="scss">
.cjui-page-panel {
  background-color: var(--cjui-bg-color-content);
  border-radius: var(--sys-admin-right-content-radius);
  overflow: auto;
  display: flex;
  flex-direction: column;

  &.height-full {
    height: calc(100vh - var(--sys-top-header-height) - var(--sys-admin-right-tools-height) - var(--sys-admin-right-tags-height) - var(--sys-admin-right-padding) * 2);
  }

  &.height-min-full {
    min-height: calc(100vh - var(--sys-top-header-height) - var(--sys-admin-right-tools-height) - var(--sys-admin-right-tags-height) - var(--sys-admin-right-padding) * 2);
  }

  &.is-isPure {
    .cjui-page-panel-body {
      padding: 0;
    }
  }

  &.shadow-always {
    box-shadow: var(--cjui-bg-color-content-shadow-light);

    &:hover {
      box-shadow: var(--cjui-bg-color-content-shadow);
    }
  }

  &.shadow-hover:hover {
    box-shadow: var(--cjui-bg-color-content-shadow);
  }
}

.cjui-page-panel-header {
  color: var(--el-text-color-primary);
  padding: var(--sys-admin-right-content-padding) var(--sys-admin-right-content-padding) 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 0;
}

.cjui-page-panel-intro {
  padding: var(--sys-admin-right-content-padding) var(--sys-admin-right-content-padding) 0;
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 1.5em;
}

.cjui-page-panel-body {
  flex: 1;
  overflow: auto;
  padding: var(--sys-admin-right-content-padding);
  font-size: 14px;
  color: var(--el-text-color-regular);
  position: relative;
}
</style>
